<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧普商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1993122_z2zu5zv3et.css">
    <script src="./js/jquery.min.js"></script>
<body>
    <header>
           <div class="main">
               <div class="head_main">
                        <span>欢迎注册</span>
                        <h3>已有账号？</h3>
                        <a href="http://127.0.0.1:56/login2.html">请登录</a>
               </div>
           </div>
           
           <!-- 边上的条 -->
           <div id="gloal-bg">
                <div class="fix-nav">
                    <ul>
                       <li><span class="car"></span>
                           <em class="em em-content1 em1">购物车</em></li>
                       <li><span class="ear"></span>
                        <em class="em em-content2 em1">客服</em></li>
                       <li><span class="code"></span>
                        <em class="em1 em-content"><img src="./img/QR_code.png" alt=""><h2>手机购物更优惠</h2></em></li>
                       <li><span class="phone"></span>
                        <em class="em em-content3 em1">消息</em></li>
                    </ul>
                </div>
                <div class="fix-top">
                    <a href="#"><span class="toTop"></span>
                        <em class=" goTop">返回顶部</em>
                    </a>
                </div>
           </div>
    </header>
   <article>
        <div id="login-conent">
            <div class="from-group">
                <input type="text" placeholder="手机号" id="tel" > 
                <span id="tit" class="input"></span>               
            </div>
            <div class="from-group">
                <input type="password" placeholder="设置密码" id="pwd">
                <span id="tip1"  class="input"></span> 
            </div>
            <div class="from-group">
                <input type="password" placeholder="确认密码" id="qpwd" >
                <span id="tip2" class="input"></span> 
            </div>
            <div class="from-group fr-group">
                <input type="checkbox" checked="checked" class="inCheck"><span>点击注册，表示您同意欧普照明<span style="color:#013ca6">《注册协议》</span></span>
            </div>
            <div class=" group1">
                <button id="btn">同意协议注册</button>
            </div>
                <h3>内购注册会员与认证>></h3>
        </div>
   </article>
    <footer>
        <div class="main f_main">
            <div class="f_box1">
                <div class="f_bo1">
                    <p>扫码快捷购物</p>
                    <img src="./img/QR_code.png" alt="">
                </div>
                <div class="f_bo2">
                    <p>官方商城电话</p>
                    <h4>0512-63828888-5022</h4>
                    <h4>0512-63828888-5333</h4>
                    <p>工作时间</p>
                    <h4>周一到周日 8:00-凌晨1:00</h4>
                </div>
            </div>
            <ul>
                <li>购物指南
                    <h6>购物须知</h6>
                </li>
                <li>支付方式</li>
                <li>配送服务</li>
                <li>售后保障</li>
                <li>关于欧普</li>
            </ul>
            <h5>Copyright © 1996-2017欧普照明股份有限公司版权所有&nbsp;&nbsp;|&nbsp;&nbsp;沪ICP备15024911号-1</h5>
            <div class="f_box2">
                <img src="./img/foot1.png" alt="">
                <img src="./img/foot2.png" alt="">
                <img src="./img/foot3.png" alt="">
            </div>
        </div>
    </footer>


    <script>
        
        $(".h_span1").mouseenter(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(180deg)",
                transition:"0.5s",
            })
            $(".box1").show()    
        }).mouseleave(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(0deg)",
                transition:"0.5s",
            })
            $(".box1").hide()
        })
 
        $("#ul1_a2").mouseenter(function(){
            $(".box2").show()    
        }).mouseleave(function(){
            $(".box2").hide() 
        })
        $("#ul1_a1").mouseenter(function(){
            $(".box3").slideDown() 
        }).mouseleave(function(){
            $(".box3").hide() 
        })
        $(".bannerLeft .navLi").mouseenter(function(){
            $(this).find($(".nav-items")).show()
        }).mouseleave(function(){
            $(this).find($(".nav-items")).hide()
        })
        // 轮播图
        let n=0;
        let liList=$(".bannerRight li");
        $(".prev ").click(function(){
            n--;
            if(n===-1){
                n=liList.length-1;
            }
            $(".bannerRight .bannerUl").animate({
                marginLeft:-(n*1008)}
            )
                
        })
        $(".next").click(function(){
            n++;
            if(n===liList.length){
                n=0;
            }
            $(".bannerRight .bannerUl").animate({
                marginLeft:-(n*1008)}
            )
        })
        let timer=setInterval(function(){
            n++;
            if(n===liList.length){
                n=0;
            }
            $(".bannerRight .bannerUl").animate({
                marginLeft:-(n*1008)}
            )
            $(".bannerRight img").mouseenter(function(){
            clearInterval(timer);
            })
        },4000)
    
    
    //    正则验证
        $("#tel").blur(function() {
            let reNum = /^(13|15|18)\d{9}$/
            if (reNum.test($("#tel").val())) {
                $("#tit").html("合格")
                $("#tit").css({
                    color: "black"
                })
            } else {
                $("#tit").html("请输入正确格式的手机号码")
                $("#tit").css({
                    color: "red"
                })
            }
        })
        $("#pwd").blur(function() {
            let leval = /^[\d]{6,18}$/
            let leval1 = /^[A-z]{6,18}$/
            let leval2 = /^[A-z0-9]{6,18}$/
            let leval3 = /^[A-z0-9-=+,.]{6,18}$/
            if (leval1.test($("#pwd").val()) || leval.test($("#pwd").val())) {
                $("#tip1").html("密码等级低")

                $("#tip1").css({
                    color: "red"
                })
            }
            if (leval2.test($("#pwd").val()) && leval1.test($("#pwd").val()) === false && leval.test($("#pwd").val()) === false) {
                $("#tip1").html("密码等级一般")
                $("#tip1").css({
                    color: "black"
                })
            }
            if (leval3.test($("#pwd").val()) && leval2.test($("#pwd").val()) === false && leval1.test($("#pwd").val()) === false && leval.test($("#pwd").val()) === false) {
                $("#tip1").html("密码等级优秀")
                $("#tip1").css({
                    color: "black"
                })
            }
            if (leval3.test($("#pwd").val()) === false && leval2.test($("#pwd").val()) === false && leval1.test($("#pwd").val()) === false && leval.test($("#pwd").val()) === false) {
                $("#tip1").html("请输入6-18位密码")
                $("#tip1").css({
                    color: "red"
                })
            }
        })
        $("#qpwd").blur(function() {

        if ($("#qpwd").val() === $("#pwd").val() && $("#pwd").val() !== "" && $("#qpwd").val() !== "") {
            $("#tip2").html("密码合格")
            $("#tip2").css({
                color: "black"
            })
        } else {
            $("#tip2").html("请输入一样的密码")
            $("#tip2").css({
                color: "red"
            })
        }
        if ($("#pwd").val() === "" || $("#qpwd").val() === "") {
            $("#tip2").html("请输入密码")
            $("#tip2").css({
                color: "red"
            })
        }
        })
        $("#btn").click(function() {
            // alert(2)
            if ($("#qpwd").val() !== $("#pwd").val()) {
                $("#tip2").html("请输入一样的密码")
                $("#tip2").css({
                    color: "red "
                })
            }
            let str = ""
            // console.log($("#login-conent .input").length)
            for (let i = 0; i < $("#login-conent .input").length; i++) {
                str += $("#login-conent .input").eq(i).html()
            }
            let a = str.split("合格").length - 1
            if (a === 2) {
                $.ajax({
                    url:"http://127.0.0.1:56/sureData",
                    data:{
                        tel:$("#tel").val()    
                    },
                    success:function(data){
                        let data1 =JSON.parse(data)
                        console.log(data1)
                        if(data1.length===0){
                            console.log($(".success"))
                            $.ajax({
                                url:"http://127.0.0.1:56/addData",
                                data:{
                                    tel:$("#tel").val(),
                                    password:$("#qpwd").val(),
                                },
                                success:function(data){
                                    console.log(data)
                                },
                            })
                            // alert("注册成功")
                            window.location.href = "http://127.0.0.1:56/login2.html"
                        }else{
                            alert("注册失败，请重新注册")
                        }
		            },
                 })          
            }
        })
        
    </script>
</body>
</html>